<!--
 * @Author: chenyulei yulei.chen@fa-software.com
 * @Date: 2023-12-14 15:55:27
 * @LastEditors: chenyulei yulei.chen@fa-software.com
 * @LastEditTime: 2023-12-15 17:24:35
 * @FilePath: /mycim4-oms-ui/src/components/CollapseCard/index.vue
 * @Description: 折叠卡片
-->
<template>
  <div
    ref="collapseCard"
    class="collapse-card"
    :class="[collapse ? 'fold' : 'expand']"
  >
    <div v-if="props.showTitle" class="card-title">
      <template v-if="$slots.title">
        <slot name="title" />
      </template>
      <template v-else>{{ props.title }}</template>
    </div>
    <div ref="cardContent" class="card-content expand">
      <slot />
    </div>
    <div class="collapse-icon">
      <IconifyIconOffline
        :icon="collapse ? ArrowDownDoubleLine : ArrowUpDoubleLine"
        @click="handleCollapse"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, type Ref, nextTick, onMounted, onUnmounted } from "vue";
import ArrowUpDoubleLine from "@iconify-icons/ri/arrow-up-double-line";
import ArrowDownDoubleLine from "@iconify-icons/ri/arrow-down-double-line";

defineOptions({
  name: "CollapseCard"
});

type Props = {
  title?: string;
  showTitle?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  title: "Title",
  showTitle: true
});

//#region emit
interface Emits {
  (e: "collapse", val: any): void;
}
const emit = defineEmits<Emits>();
//#endregion

//#region dom
// 卡片dom
const collapseCard = ref(null);
// 内容dom
const cardContent = ref(null);
//#endregion

// 是否折叠
const collapse: Ref<boolean> = ref(false);
// 内容高度
const contentClientHeight = ref(0);

/**
 * @description 点击展开/折叠卡片
 * @returns
 */
const handleCollapse = () => {
  collapse.value = !collapse.value;
  // 展开时 设置最大高度为内容高度 + 36（标题高度）
  if (!collapse.value) {
    collapseCard.value.style = `max-height: ${
      cardContent.value.clientHeight + 36
    }px`;
  } else {
    collapseCard.value.style = "";
  }
  emit("collapse", collapse.value);
};

/**
 * @description 设置卡片的最大高度
 * @returns
 */
const setContentHeight = () => {
  contentClientHeight.value = cardContent.value.clientHeight;
  collapseCard.value.style = `max-height: ${contentClientHeight.value + 36}px`;
};

onMounted(() => {
  nextTick(() => {
    setContentHeight();
    window.addEventListener("resize", setContentHeight);
  });
});

onUnmounted(() => {
  // 在组件销毁前移除事件监听器
  window.removeEventListener("resize", setContentHeight);
});

defineExpose({
  collapseCard,
  cardContent
});
</script>

<style lang="scss" scoped>
.collapse-card {
  margin-top: 16px;
  background: #fff;
  border: solid 1px #c1c1c1;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  padding: 6px;
  min-height: 36px;
  transition: max-height 0.3s ease;

  &.expand {
    max-height: 100px;
  }

  &.fold {
    max-height: 36px;
  }

  .collapse-icon {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 5px;
    color: #7e7d7d;
    cursor: pointer;
  }

  .card-title {
    font-weight: bold;
    line-height: 22px;
    margin-bottom: 6px;
  }

  .card-content {
    min-height: 72px;
    // padding: 6px 0;
  }
}
</style>
